<template>
  <div class="flex h-full">
    <f-select-label-group v-model="searchForm.work_group_id" @change="handleCategoryChange"></f-select-label-group>
    <!-- 列表 -->
    <div class="flex-1 ml-[10px] overflow-hidden">
      <f-table ref="tableRef" @register="register">
        <!-- <template #header-left>
          <el-button type="primary" @click="handleAdd">{{ t('add') }}</el-button>
          <el-button @click="handleBatchDelete">{{ t('deleteBatch') }}</el-button>
        </template> -->
        <template #action="{ row }">
          <el-space wrap>
              <el-button type="primary" link @click="handleEdit(row)">{{ t('edit') }}</el-button>
              <el-button type="primary" link @click="handleDelete(row)">{{ t('delete') }}</el-button>
          </el-space>
        </template>
        <template #header-left>
          <el-button type="primary" @click="handleTagsUser">标签关系同步</el-button>
        </template>
      </f-table>
    </div>
    <!-- 新建分组弹框 -->
    <f-form-model ref="formModelRef" is="UserLabelForm" @change="() => methods.reload()"></f-form-model>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { t } from '@/lang'
import FSelectLabelGroup from '@/addon/htscrm/components/f-select-label-group/index.vue'
import FTable, { BasicColumn, useTable } from '@/addon/htscrm/components/f-table'
import { tableColumns, tableSearchFormItems } from '@/addon/htscrm/data/user.label'
import { batchDeleteUserLabelApi, deleteUserLabelApi, getUserLabelListApi, getTagsUserApi } from '@/addon/htscrm/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import FFormModel from '@/addon/htscrm/components/f-form-model'

const formModelRef = ref()

const searchForm = ref({
    work_group_id: ''
})

const tableRef = ref()
const { methods, register } = useTable({
    rowKey: 'id',
    searchFromItems: tableSearchFormItems(t),
    columns: tableColumns(t) as BasicColumn<IUserLabelItem>[],
    beforeFetch: (opt) => {
        if (searchForm.value.work_group_id) {
            opt.work_group_id = searchForm.value.work_group_id
        }
        return opt
    },
    api: async (opt) => (await getUserLabelListApi(opt)).data
})

/**
* 新增
*/
function handleAdd () {
    formModelRef.value?.show(t('add'))
}
/**
* 编辑
*/
function handleEdit (row: IUserLabelItem) {
    formModelRef.value?.show(t('add'), row)
}

const handleTagsUser = async () => {
    let res = await getTagsUserApi()
    if (res.code == 1) {
        ElMessage.success(t('syncSuccess'))
    }
}

/**
* @description 删除数据
*/
async function handleDelete (row: IUserLabelItem) {
    const action = await ElMessageBox.alert(t('deleteTips'), t('alert.title'), {
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: t('alert.cancel'),
        confirmButtonText: t('alert.confirm')
    })
    if (action === 'confirm') {
        await deleteUserLabelApi(row.id)
        ElMessage.success(t('deleteSuccess'))
        methods.reload()
    }
}

/**
* @description 批量删除
*/
async function handleBatchDelete () {
    const selection:IUserLabelItem[] = methods.getSelectionRows()
    if (selection.length == 0) {
        ElMessage.warning(t('deleteEmptyTips'))
        return
    }
    const ids = selection.map(item => item.id)
    const action = await ElMessageBox.alert(t('deleteBatchTips'), t('alert.title'), {
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: t('alert.cancel'),
        confirmButtonText: t('alert.confirm')
    })
    if (action === 'confirm') {
        await batchDeleteUserLabelApi(ids)

        ElMessage.success(t('deleteSuccess'))
        // 清空选项
        methods.clearSelection()
        // 重新加载数据
        methods.reload()
    }
}

function handleCategoryChange (value:string) {
    searchForm.value.work_group_id = value
    methods.reload()
}
</script>

<style lang="scss" scoped>
</style>
